'use client'

import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { ContractForm } from './components/contract-form'
import { ContractItemsForm } from './components/contract-items-form'
import { ContractEditForm } from './components/contract-edit-form'
import { ContractItemsEditForm } from './components/contract-items-edit-form'

export default function EDPPage() {
  const [activeTab, setActiveTab] = useState('contracts')
  const [selectedContractId, setSelectedContractId] = useState<number | undefined>()

  // 계약 생성 완료시 계약 아이템 탭으로 이동하고 해당 계약을 사전 선택
  const handleContractCreated = (contract: { id: number; contractNo: string; contractName: string; status: string }) => {
    setSelectedContractId(contract.id)
    setActiveTab('contract-items')
  }

  // 계약 수정 완료시 계약 아이템 삭제 탭으로 이동하고 해당 계약을 사전 선택
  const handleContractUpdated = (contract: { id: number; contractNo: string; contractName: string; status: string }) => {
    setSelectedContractId(contract.id)
    setActiveTab('contract-items-edit')
  }

  return (
    <div className="container mx-auto py-6">
      <div className="mb-8">
        <h1 className="text-3xl font-bold tracking-tight">EDP 테스트 데이터 관리</h1>
        <p className="text-muted-foreground mt-2">
          현업 테스트를 위한 계약 및 계약 아이템 데이터를 수동으로 생성할 수 있습니다.
        </p>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="contracts">계약 생성</TabsTrigger>
          <TabsTrigger value="contract-items">계약 아이템 생성</TabsTrigger>
          <TabsTrigger value="contracts-edit">계약 수정</TabsTrigger>
          <TabsTrigger value="contract-items-edit">계약 아이템 삭제</TabsTrigger>
        </TabsList>
        
        <TabsContent value="contracts" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-1">
            <ContractForm onContractCreated={handleContractCreated} />
          </div>
        </TabsContent>
        
        <TabsContent value="contract-items" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-1">
            <ContractItemsForm preselectedContractId={selectedContractId} />
          </div>
        </TabsContent>
        
        <TabsContent value="contracts-edit" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-1">
            <ContractEditForm onContractUpdated={handleContractUpdated} />
          </div>
        </TabsContent>
        
        <TabsContent value="contract-items-edit" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-1">
            <ContractItemsEditForm preselectedContractId={selectedContractId} />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}